<template>
    <div class="main-container" :style="{ height: `${clientHeight}px` }">
        <MainPage v-show="active === 0" />
        <MinePage v-if="active === 1" />
        <van-tabbar
            v-model="active"
            active-color="#C4161C"
            inactive-color="#878787"
            class="tab-container"
            id="tab-container"
            :safe-area-inset-bottom="true"
        >
            <van-tabbar-item>
                <span>首页</span>
                <template #icon="props">
                    <img
                        :src="
                            props.active ? homeIcon.active : homeIcon.inactive
                        "
                    />
                </template>
            </van-tabbar-item>
            <van-tabbar-item>
                <span>我的</span>
                <template #icon="props">
                    <img
                        :src="
                            props.active ? mineIcon.active : mineIcon.inactive
                        "
                    />
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
import Vue from "vue";
import { mapActions, mapState } from "vuex";
import { Tabbar, TabbarItem } from "vant";
Vue.use(Tabbar);
Vue.use(TabbarItem);
import MainPage from "./MainPage.vue";
import MinePage from "./MinePage.vue";
export default {
    components: {
        MainPage,
        MinePage,
    },
    data() {
        return {
            active: 0,
            homeIcon: {
                active: require("../assets/img/home-select.png"),
                inactive: require("../assets/img/home.png"),
            },
            mineIcon: {
                active: require("../assets/img/mine-select.png"),
                inactive: require("../assets/img/mine.png"),
            },
        };
    },
    computed: {
        ...mapState("app", ["curTab", "clientHeight"]),
    },
    watch: {
        active(valNew) {
            if (valNew === 0) {
                document.title = "迈瑞视频客服";
            } else if (valNew === 1) {
                document.title = "我的";
            }
            this.setCurTab(valNew);
        },
    },
    mounted() {
        window.addEventListener("resize", this.resizeHandler);
        this.$nextTick(() => {
            this.resizeHandler();
        });
        const self = this;
        setTimeout(() => {
            self.resizeHandler();
        }, 3000);
    },
    methods: {
        ...mapActions("app", ["setCurTab", "updateClientSize"]),

        resizeHandler() {
            const appElem = document.getElementById("app");
            const tabElem = document.getElementById("tab-container");
            if (tabElem && appElem) {
                const rect = tabElem.getBoundingClientRect();
                // 更新store
                this.updateClientSize({
                    height: rect.top + 50, // appElem.clientHeight - tabElem.clientHeight,
                    width: appElem.clientWidth,
                });
            }
        },
    },
};
</script>

<style lang="less" scoped>
.main-container {
    width: 100%;
    height: 100%;
    overflow-y: hidden;

    .tab-container {
        background: rgba(250, 250, 250, 0.9);
        box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.25);
        backdrop-filter: blur(10px);
    }
}
</style>
<style lang="less">
.van-tabbar-item--active {
    background: rgba(250, 250, 250, 0);
}
.van-tabbar-item__icon img {
    height: 24px;
}
.van-tabbar-item__icon {
    img {
        width: 22px;
        height: 24px;
    }
}
</style>
